<template>
  <div>
    <h1>蓝桉已遇释槐鸟</h1>
<ul v-for="item in list">
  <il>姓名：{{item.name}}</il>
  <li>年龄：{{item.age}}</li>
</ul>
<table border="1">
  <tr bgcolor="red">
    <td>用户借款编号</td>
    <td>借款用户帐号</td>
    <td>借款款项名称</td>
    <td>借款金额</td>
    <td>剩余还款本金</td>
  </tr>
  <tr v-for="item in blist">
    <td>{{item.hao}}</td>
    <td>{{item.zhang}}</td>
    <td>{{item.xiang}}</td>
    <td>{{item.jin}}</td>
    <td>{{item.ben}}</td>
  </tr>
</table>
{{str}}
  </div>
</template>

<script setup lang="ts">
import { reactive,toRefs,ref } from 'vue';
let str=ref("双向数据绑定演示")
let data=reactive({
  list:[
    {name:'李四',age:20},
    {name:'王五',age:29},
    {name:'赵六',age:22},
    {name:'李柒',age:26},
  ],
  blist:[
{hao:'1',zhang:'123456',xiang:'基金',jin:'10000',ben:"1000"},
{hao:'2',zhang:'123852',xiang:'基金会',jin:'5000',ben:"0"}
  ]
})
let {list,blist}=toRefs(data)
</script>

<style scoped>
ul{
list-style: none;
}
li{
margin-bottom: 40px;
}
</style>